<template>
    <div>
        <div v-if="username" >
            <!-- <van-nav-bar
                title = "我的"
                right-text="注销"
                @click-right="onClickRight"
            /> -->
            <div class="myHeard">
                <div class="loginImg">
                    <img src="@/assets/img/head.jpg"/>
                </div>
                <div class="heardText" >
                    <div class="loginTit">
                        {{username}}
                    </div>
                    <div>欢迎来到购物网</div>
                </div>
                <div @click="onClickRight" class="topBtn">注销</div>         
            </div>
        </div>
         <div v-else>
             <!-- <van-nav-bar
                title = "我的"
            /> -->
             <div class="myHeard">
                <div class="loginImg">
                    <img src="@/assets/img/head.jpg"/>
                </div>
                <div class="heardText" >
                    <div class="registerLogin"> 
                        <div @click="jumpRegister">注册/</div>
                        <div @click="jumpLogin">登录</div>
                    </div>
                    <div>登录后可享受更多特权</div>
                </div>         
            </div>
        </div> 
        <div class="myMiddle">
            <div class="firstDiv">
                <div class="myMiddle_icon" style="background-color:#00FF00">
                    <van-icon name="label-o" />
                </div>  
                <span v-if="memberPoints">我的积分:{{memberPoints}}</span>
                <span v-else>积分</span>
            </div>
            <div class="rightDiv">
                <div class="myMiddle_icon"> 
                    <van-icon name="shop" />
                </div>
                <span>订单详情</span>
            </div>
        </div>
        <div class="myMiddleRouter">
            <div>
                <!-- 优惠券列表 -->
                <van-popup
                v-model="showList"
                round
                position="bottom"
                style="height: 90%; padding-top: 4px;"
                >
                <!-- @exchange="onExchange" 兑换优惠券回调  code, 兑换码-->
                <!-- @change="onChange" 优惠券切换回调	index, 选中优惠券的索引 -->
                    <van-coupon-list
                        :coupons="coupons"
                        :chosen-coupon="chosenCoupon"
                        :disabled-coupons="disabledCoupons"
                        @change="onChange" 
                        @exchange="onExchange" 
                    />
                </van-popup>
            </div>
            <van-cell-group>
                <van-cell title="优惠券" icon="coupon" is-link  @click="showList = true"/>
                <van-cell title="收货地址" icon="map-marked" is-link to="addressList" />
                <van-cell title="我的通知" icon="chat-o" is-link  to="myNotice"/>
                <van-cell title="会员权益" icon="vip-card-o" is-link  />
                <van-cell title="服务中心" icon="service-o" is-link  />
                <van-cell title="设置" icon="setting" is-link  to="Setting"/>
            </van-cell-group>
        </div>
        
        
    </div>
</template>

<script>

    const coupon = {
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '优惠券名称',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '1.5',
        unitDesc: '元',
    };
    export default {
        data(){
            return{
                username: '',
                memberPoints: null,
                showList: false,
                chosenCoupon: -1,
                coupons: [coupon],
                disabledCoupons: [coupon],
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.username = userInfo.userName
                this.memberPoints = userInfo.memberPoints
                console.log(userInfo);
            }
        },
        methods:{
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
            },
            onExchange(code) {
                this.coupons.push(coupon);
            },
            onClickRight(){
                this.$dialog.confirm({
                    title: '',
                    message: '是否确定注销？',
                })
                .then(() => {
                    localStorage.removeItem('userInfo')
                    this.$router.push({ path:'/login' })
                    // this.$router.go(-1);
                })
                .catch(() => {
                    // on cancel
                });   
            },
            jumpRegister(){
                this.$router.push({ path:'/register' })
            },
            jumpLogin(){
                this.$router.push({ path:'/login' })
            }
        } 
    }
</script>

<style lang="scss" scoped>
    .myHeard{
        display: flex;
        width: 100%;
        background-color: #1E90FF;
        // border-top: darkgrey solid .2px;
        border-bottom: darkgrey solid .2px;
        height: 120px;
        .loginImg{
            margin: auto 15px;
            width: 30%;
        }
        .loginImg img{
            height: 70px;
            width: 70px;
            border-radius: 35px;
        }
    }
    .loginTit{
        // display: flex;
        margin: 35px auto 10px 10px;
        text-align: left;
        // margin-bottom: 10px;
    }
    .heardText{
        font-size: 17px;
        width: 50%;
        // margin: auto 15px;
    }
    .topBtn{
        float: right;
        color: blue;
        font-size: 12px;
        width: 20%;
        margin-top: 5px;
        // margin-right: 5px;
    }
    .registerLogin{
        display: flex;
        font-size: 12px;
        color: blue;
        margin-top: 35px;
        margin-bottom: 10px;
    }
    .myMiddle{
        display: flex;
        // height: 60px;
        background: #F5FFFA; 
        margin-bottom: 10px;
        padding-bottom: 5px;
        .firstDiv{
            width: 50%;
            // height: 30px;
            border-right: thistle solid 0.5px;
            // margin-bottom: 5px;   
            span{
                font-size: .8rem;
            }    
        }
        .myMiddle_icon{
            height: 34px;
            width: 34px;
            background-color: orange;
            margin: 5px auto ;
            border-radius: 35px;
            .van-icon {
                margin-top: 6px;
            }
        }
        .rightDiv{
            width: 50%;
            span{
                font-size: .8rem;
                // margin-bottom: 5px;
            }
        }
    }
    .myMiddleRouter  .van-cell__title span{
        float: left;
    }

</style>